<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<CustomerViewModel>" %>
<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />    
<%:  Html.ValidationSummary() %>
<%= Html.HiddenFor(x=>x.VehicleTypeID) %>
<div>
<fieldset  class="t-fieldset">
    <legend>Customer Info</legend>
    <dl class="left">
        <dt>Name:</dt><dd><%: Html.EditorFor(x=>x.Name) %>*</dd>
        <dt>CustomerNo:</dt><dd><%: Html.EditorFor(x=>x.CustomerNo) %>*</dd>
        <dt>IdentiyNo:</dt><dd><%: Html.EditorFor(x=>x.IdentityNo) %></dd>
    </dl>
    
    <dl class="right">
        <dt>PrimariyPhone:</dt><dd><%: Html.EditorFor(x=>x.PrimaryPhone) %>*</dd>
        <dt>SecondaryPhone:</dt><dd><%: Html.EditorFor(x=>x.SecondaryPhone) %></dd>
        <dt>ThirdaryPhone:</dt><dd><%: Html.EditorFor(x=>x.ThirdaryPhone) %></dd>
    </dl>
</fieldset>
</div>
<div>
<fieldset class="t-fieldset">
    <legend>Vehicle Info</legend>
    <dl class="middle"><dt>VehicleModel:</dt><dd><%: Html.TextBoxFor(x=>x.VehicleModel,new Dictionary<string, object>(){{"readonly", "true"}})  %>*</dd></dl>
    <dl class="left">
        <dt>1-Manufacture:</dt><dd><% Html.Telerik().DropDownList()
                                             .Name("vehicleManufactureDropDownList")
                                             .DataBinding(dataBinding => dataBinding.Ajax().Select("_GetVehicleManufacture", "VehicleType"))

                                             .ClientEvents(events => events.OnChange("onVehicleModelChange"))
                                                                           
                                             .Render();                    
                                             
    
                                                                           %></dd></dl>
                                                                           <dl class="right">
        
        <dt>2-Model:</dt><dd><% Html.Telerik().DropDownList()
                                             .Name("vehicleModelDropDownList")
                                             .DataBinding(dataBinding => dataBinding.Ajax().Select("_GetVehicleModelForManufacture", "VehicleType"))
                                             .ClientEvents(events => events.OnChange("onVehicleModelChange")
                                                                           .OnDataBinding("onVehicleModelDataBinding"))
                                             .Render();
                                
                            %></dd></dl>
    
      <dl class="left">
      <dt>3-EngineType:</dt><dd><% Html.Telerik().DropDownList()
                                             .Name("vehicleEngineTypeDropDownList")
                                             .DataBinding(dataBinding => dataBinding.Ajax().Select("_GetVehicleEngineTypeForManufactureModel", "VehicleType"))
                                             .ClientEvents(events => events.OnChange("onVehicleModelChange")
                                                                           .OnDataBinding("onVehicleModelDataBinding"))
                                             .Render();                    
                                  %></dd>
                                  
    </dl>       
    
    
    <dl class="right">
        <dt>4-ModelYear:</dt><dd><% Html.Telerik().DropDownList()
                        .Name("vehicleModelYearDropDownList")
                        .DataBinding(dataBinding => dataBinding.Ajax().Select("_GetVehicleModelYearForManufactureModelEngineType", "VehicleType"))
                        .ClientEvents(events => events.OnChange("onVehicleModelChange")
                                                      .OnDataBinding("onVehicleModelDataBinding"))
                        .Render();                    
            %></dd>
        
        
    </dl>
</fieldset>
</div>
<div>
<fieldset class="t-fieldset">
<dl class="left">
        <dt>License:</dt><dd><%: Html.EditorFor(x=>x.VehicleLicensePlate) %>*</dd>
        <dt>ChassiNo:</dt><dd><%: Html.EditorFor(x=>x.ChassiNo) %>*</dd>
        <dt>EngineNo:</dt><dd><%: Html.EditorFor(x=>x.EngineNo) %></dd>
    </dl>
    
    <dl class="right">
        <dt>PurchaseDate:</dt><dd><%: Html.EditorFor(x=>x.VehiclePurchaseDate) %>*</dd>
        <dt>PurchaseLocation:</dt><dd><%: Html.EditorFor(x=>x.PurchaseRegion) %></dd>
        <dt>CurrentMileage:</dt><dd><%: Html.EditorFor(x=>x.CurrentMileage) %></dd>
    </dl>
    
</fieldset>
</div>
<style type="text/css">
    .left {float: left; }
    .right{float: right}
    .middle{float:none}
    .t-fieldset
    {
        width: 550px;
    }
    .t-combobox
    {
        
        margin-bottom: 280px;
        float: left;
    }
    .t-dropdown
    {
        clear: both;
        float: left;
    }
    .col_one { 
margin: 0; /* Applied to first column only in lieu of padding (personal thing) */ 
width: 50%; /* Allows for fluid design. Can be set to pixels */ 
float: left; 
} 
.col_two { 
margin: 0 0 0 10px; /* Puts a 10 pixel space between columns (left side) - think cellspacing */ 
width: 50%; 
float: right; 
} 
</style>
